<script setup>
import {ref, onMounted, defineEmits} from "vue"
import {searchUser} from "@/apis/search"

const keyWord = ref("")
const userList = ref([])
const emit = defineEmits(['confirm'])
const current_page = ref(1)
const last_page = ref(1)

function loadData(key) {
  const query = "page=" + current_page.value + "&key=" + key
  searchUser(query)
      .then(res => {
        const {code, data} = res.data;
        if (code === 1) {
          userList.value = data.data;
          current_page.value = data.current_page;
          last_page.value = data.last_page;
        }
      })
}

function onScroll(scrollBottom) {
  if (scrollBottom < 50) {
    current_page.value++
    loadData();
  }
}

function onConfirm(item) {
  emit('confirm', item);
  userList.value = [];
}

onMounted(() => {
  loadData("")
})

</script>

<template>
  <div class="p-a">
    <t-search
        v-model="keyWord"
        placeholder="搜索"
        :onChange="loadData"
    />
  </div>
  <div class="select-list">
    <t-list @scroll="onScroll">
      <t-cell hover v-for="item in userList" :key="item.id" :title="item.profile.name"
              :description="item.profile.class" @click="onConfirm(item)"></t-cell>
    </t-list>
  </div>
</template>

<style scoped lang="less">
.p-a {
  padding: 12px;
  box-sizing: border-box;
}

.select-list {
  height: 300px;
  overflow: scroll;
}
</style>